import React, { useEffect, useState } from 'react'
import '../css/huodongdetail.css'
import { useLocation } from 'react-router-dom'
import { gethgjhddetail, getUser2Djm, puthgjdetail } from '../../api/api'
import { useNavigate } from 'react-router-dom'

export default function HuoDongDetail() {
  const navigate = useNavigate()

  let { state } = useLocation()
  let [users, setusers] = useState([])
  let [obj, setobj] = useState({})
  let [iptValue, setiptValue] = useState('')
  let user = sessionStorage.getItem('user')
  useEffect(() => {
    gethgjd()
    getUser2Djm(user).then((res) => {
      setusers(res.data)
    })
  }, [])

  function gethgjd() {
    gethgjhddetail(state?.id).then((res) => {
      let data = res.data
      data.bmpeople = JSON.parse(data.bmpeople)
      data.lyarr = JSON.parse(data.lyarr)
      setobj(data)
    })
  }

  let htime =
    obj?.hdtimes?.split(' ')[1].split(':')[0] +
    ':' +
    obj?.hdtimes?.split(' ')[1].split(':')[1]
  return (
    <div className="hgj_huodongdetail">
      <div className="hgj_huodongdetail_top">
        <div className="top_left">
          <i
            style={{ fontSize: '20px' }}
            className="bi bi-chevron-left"
            onClick={() => {
              navigate('/huodong')
            }}
          ></i>
        </div>
        <div className="top_content">活动详情</div>
        <div
          className="top_right"
          style={{ color: obj.bmstate - 0 ? '#ccc' : '#FFBB10' }}
        >
          {obj.bmstate - 0 ? '已报名' : '报名'}
        </div>
      </div>
      <div className="newsList">
        <div className="tab">
          <div className="tab_left">
            <img className="left_img" src={obj.author} />
          </div>
          <div className="tab_right">
            <div className="right_wz">
              <p className="p1">{obj?.username}</p>
              <p className="p2">{htime}</p>
              <p className="p1">{obj?.hdtimes?.split(' ')[0]}</p>
            </div>
            <div className="right_1">
              <div className="right_1_img">
                <img className="hgj-img" src={obj.icon} />
              </div>
              <span className="hgj_name">{obj.hdtypes}</span>
            </div>
          </div>
        </div>
      </div>
      <div className="top_cet">
        <div className="cet_left">{obj.jieshao}</div>
        <div className="cet_right">{obj.hdtilte}</div>
      </div>
      <div className="top_cet_1">
        <div className="cet_title">
          <div className="title_left">已经报名的同学</div>
          <div className="title_right">
            喊人一起来<i className="bi bi-share"></i>
          </div>
        </div>
        <div className="touxiang"></div>
      </div>
      <div className="top_cet_2">
        <div className="cet_2_1">
          <i className="bi bi-envelope-check-fill"></i> 留言
        </div>
      </div>
      <div className="jeijie">
        {obj.lyarr?.map((item, index) => {
          return (
            <div className="top_cet_3" key={index}>
              <div className="cet_top">
                <div className="top_img">
                  {' '}
                  {item.ahtouimg ? (
                    <img src={item.ahtouimg} />
                  ) : (
                    <div
                      style={{
                        width: '100%',
                        borderRadius: '50%',
                        background: '#ccc',
                        height: '39px',
                      }}
                    ></div>
                  )}
                </div>
                <div className="top_name">{item.ahtouname}</div>
                <div className="top_date">{item.ahtoudate}</div>
              </div>
              <div className="cet_bottom11">{item.liuuyan}</div>
            </div>
          )
        })}
      </div>
      <div className="flietr">
        <div className="flietr_content">
          <input
            placeholder="请输入留言"
            value={iptValue}
            className="flieter_ipt"
            onChange={(e) => {
              setiptValue(e.target.value.trim())
            }}
          ></input>
          <button
            className="btn"
            onClick={() => {
              if (iptValue) {
                let ly = {
                  ahtouname: users.userName,
                  ahtouimg: users.img ? users.img : '',
                  ahtoudate: new Date().toLocaleString().replaceAll('/', '-'),
                  liuuyan: iptValue,
                }
                obj?.lyarr?.unshift(ly)
                console.log(obj)
                puthgjdetail({
                  id: obj.id,
                  lyarr: JSON.stringify(obj.lyarr),
                }).then((res) => {
                  gethgjd()
                  setiptValue('')
                })
              } else {
                console.log('不能为空')
              }
            }}
          >
            发送
          </button>
        </div>
      </div>
    </div>
  )
}
